//配置路由相关的信息
import VueRouter from 'vue-router'
import vue from 'vue';

//导入
/* import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User.vue'
 */

const Home=()=>import('../components/Home');
const HomeNews=()=>import('../components/HomeNews');
const HomeMessage=()=>import('../components/HomeMessage');


const About=()=>import('../components/About');
const User=()=>import('../components/User');

const Profile=()=>import('../components/Profile');


//1.通过Vue.use(插件),安装插件
vue.use(VueRouter);

//2.创建路由对象
const routes=[
	{
		path:'/',
		//redirect重定向
		redirect:'/home'
	},
	{
		path:'/home',
		component:Home,
		meta:{
			title:'首页'
		},
		children:[
			//默认显示
			/* {
				path:'/',
				//redirect重定向
				redirect:'news'
			}, */
			{
				path:'news',
				component:HomeNews
			},
			{
			path:'message',
			component:HomeMessage
			}
		]
	},{
		path:'/about',
		component:About,
		meta:{
			title:'关于'
		},
		//路由独享的守卫
		beforeEnter: (to, from, next) => {
		   // console.log('about beforeEnter');
			 next();
		 }
	},{
		path:'/user/:userId',
		component:User,
		meta:{
			title:'用户'
		},
	},
	{
		path:'/profile',
		component:Profile,
		meta:{
			title:'档案'
		},
	}
]

const router =new VueRouter({
	//配置路由和组件之间的应用关系
	routes,
	//模式 html5的history模式
	mode:'history',
	//选中时class别名
	linkActiveClass:'active'
})

//前置钩子（hook）跳转前回调
router.beforeEach((to,from,next)=>{
	//从from跳转到to
	document.title=to.matched[0].meta.title;
	// console.log(to);
	// console.log('+++');
	// 下一步
	next();
})

//后置钩子(hook) 跳转后回调
router.afterEach((to,from)=>{
	// console.log('---')
})

//3.将router对象传入到vue
export default router

const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}